<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: a479655315
  Date: 2019/8/30
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="icon" type="image/png"
          href="img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <title>产品修改</title>

    <meta
            content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
            name='viewport'/>
    <meta name="viewport" content="width=device-width"/>


    <!-- Bootstrap core CSS     -->
    <link
            href="${pageContext.request.contextPath}/css/bootstrap.min.css"
            rel="stylesheet"/>

    <!-- Animation library for notifications   -->
    <link
            href="${pageContext.request.contextPath}/css/animate.min.css"
            rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link
            href="${pageContext.request.contextPath}/css/light-bootstrap-dashboard.css"
            rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link
            href="${pageContext.request.contextPath}/css/demo.css"
            rel="stylesheet"/>


    <!--     Fonts and icons     -->
    <style type="text/css">
        .new-contentarea {
            width: 100%;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }

        .new-contentarea label {
            width: 100%;
            height: 100%;
            display: block;
        }

        .new-contentarea input[type=file] {
            width: 188px;
            height: 60px;
            background: #333;
            margin: 0 auto;
            position: absolute;
            right: 50%;
            margin-right: -94px;
            top: 0;
            right /*\**/: 0px \9;
            margin-right /*\**/: 0px \9;
            width /*\**/: 10px \9;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 2;
        }

        a.upload-img {
            width: 165px;
            display: inline-block;
            margin-bottom: 10px;
            height: 57px;
            line-height: 57px;
            font-size: 20px;
            color: #FFFFFF;
            background-color: #f38e81;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
        }

        a.upload-img:hover {
            background-color: #ec7e70;
        }

        .tc {
            text-align: center;
        }
    </style>
    <link
            href="${pageContext.request.contextPath}/css/pe-icon-7-stroke.css"
            rel="stylesheet"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/XMLHttpRequest.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"></script>

    <!--   Core JS Files   -->
    <script
            src="${pageContext.request.contextPath}/js/jquery-1.10.2.js"
            type="text/javascript"></script>
    <script
            src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            type="text/javascript"></script>

    <!--  Checkbox, Radio & Switch Plugins -->
    <script
            src="${pageContext.request.contextPath}/js/bootstrap-checkbox-radio-switch.js"></script>

    <!--  Charts Plugin -->
    <script
            src="${pageContext.request.contextPath}/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script
            src="${pageContext.request.contextPath}/js/bootstrap-notify.js"></script>


    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
    <script
            src="${pageContext.request.contextPath}/js/light-bootstrap-dashboard.js"></script>

    <!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
    <script
            src="${pageContext.request.contextPath}/js/demo.js"></script>

    <script>
        $(function () {
            //预览上传的主图
            $("#fileUpload1").on('change', function () {
                if (typeof (FileReader) != "undefined") {
                    var image_holder = $("#showProPicture");
                    image_holder.empty();
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("<img />", {
                            "src": e.target.result,
                            "class": "thumb-image",
                            "width": "400px",
                            "heigth": "400px"
                        }).appendTo(image_holder);
                    }
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            });
            //预览上传的附件
            $("#fileUpload").on('change', function () {
                //Get count of selected files
                var countFiles = $(this)[0].files.length;
                var imgPath = $(this)[0].value;
                var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
                var image_holder = $("#image-holder");
                //image_holder.empty();
                if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                    if (typeof (FileReader) != "undefined") {
                        //loop for each file selected for uploaded.
                        for (var i = 0; i < countFiles; i++) {
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $("<img />", {
                                    "src": e.target.result,
                                    "name": "proFileImage",
                                    "class": "thumb-image",
                                    "width": "200px",
                                    "heigth": "200px"
                                }).appendTo(image_holder);
                            }
                            image_holder.show();
                            reader.readAsDataURL($(this)[0].files[i]);
                        }
                    } else {
                        alert("This browser does not support FileReader.");
                    }
                } else {
                    alert("请选择图片！");
                }
            });
        })

        // 显示一级类目
        $(function () {
            // 二级类目
            var cid = $("#category").val()
            $.ajax({
                url: '${pageContext.request.contextPath}/category/findCategorySecondByCidToJson',
                dataType: 'json',
                type: 'get',
                data: {
                    cid: cid
                },
                success: function (data) {
                    $("#categorysecond").empty();
                    for (var i = 0; i < data.length; i++) {
                        str = ""
                        csid = data[i].id
                        if (csid == ${product.csid}) {
                            str = "selected='selected'"
                        }
                        $("#categorysecond").append(`<option ` + str + ` value="` + data[i].id + `">` + data[i].csname + `</option>`);
                    }


                }

            })
            $("#category").change(function () {
                var cid = $("#category").val()
                if (cid == -1) {
                    $("#categorysecond").empty();
                    $("#categorysecond").append(`<option value="-1">请选择</option>`)
                    return
                }
                $.ajax({
                    url: '${pageContext.request.contextPath}/category/findCategorySecondByCidToJson',
                    dataType: 'json',
                    type: 'get',
                    data: {
                        cid: cid
                    },
                    success: function (data) {
                        $("#categorysecond").empty();
                        for (var i = 0; i < data.length; i++) {
                            $("#categorysecond").append(`<option  value="` + data[i].id + `">` + data[i].csname + `</option>`);
                        }


                    }

                })
            })

        })

        //删除主图片
        function delProPictue(pid) {
            if(confirm("确定删除该图片？")){
                $.ajax({
                    url: '${pageContext.request.contextPath}/product/delProductPic.html',
                    dataType: 'text',
                    type: 'get',
                    data: {
                        pid: pid
                    },
                    success: function (data) {
                        if (data == "ok") {
                            $("#showProPicture").empty();
                            $("#showProPictureButton").empty();
                        }
                    }
                })
            }
        }

        //删除附件图片
        function delProFile(profileId) {
            if(confirm("确定删除该图片？")){
                $.ajax({
                    url: '${pageContext.request.contextPath}/product/delProductFile.html',
                    dataType: 'text',
                    type: 'get',
                    data: {
                        profileId: profileId
                    },
                    success: function (data) {
                        if (data == "ok") {
                            window.location.reload()
                        }
                    }
                })
            }
        }

        //校验是否选择类目
        function checkForm() {
            var isChecked =  $("#categorysecond").val()
            if(isChecked == -1){
                alert("请选择类目！")
                return false;
            }else{
                return true;
            }

        }

    </script>
</head>
<body>

<div class="wrapper">


    <!-- 左侧导航 -->
    <%@include file="include/left.jsp" %>

    <div class="main-panel">

        <!-- nav -->
        <%@include file="include/nav.jsp" %>

        <form action="${pageContext.request.contextPath}/product/doUpdate.html" method="post" enctype="multipart/form-data"  onsubmit="return checkForm()">
            <input type="hidden" name="id" value="${product.id}">
            <input type="hidden" name="cid" value="${pageInfo.cid}">
            <input type="hidden" name="searchCsid" value="${pageInfo.searchCsid}">
            <input type="hidden" name="pageNum" value="${pageInfo.pageNum}">
            <input type="hidden" name="searchProName" value="${pageInfo.searchProName}">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="header">
                                    <h4 class="title">产品修改</h4>
                                </div>
                                <div class="content">

                                    <div class="col-md-8">
                                        <div class="form-group">

                                            <label>展示图片</label>

                                            <div>
                                                <input id="fileUpload1" type="file" name="proMainPicture"
                                                       accept="image/png,image/gif,image/jpg"/><br/>
                                                <div id="showProPictureButton">
                                                    <c:if test="${!empty product.proPicture}">
                                                        <button type="button" onclick="delProPictue(${product.id})">删除
                                                        </button>
                                                    </c:if>
                                                </div>
                                                <div id="showProPicture">
                                                    <c:if test="${!empty product.proPicture}">
                                                        <img src="${pageContext.request.contextPath}/images${product.proPicture}"
                                                             width="400px" height="400px">
                                                    </c:if>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">

                                            <label>附件图片</label>

                                            <div id="wrapper">
                                                <input id="fileUpload" name="proFile" type="file" multiple
                                                       accept="image/png,image/gif,image/jpg"/>
                                                <br/>
                                                <div id="image-holder">
                                                    <c:forEach items="${productFiles}" var="pf" varStatus="vs">
                                                        <div id="delProFile${pf.id}"
                                                             <c:if test="${vs.count % 4 != 0}">style="float: left"</c:if>>
                                                            <button type="button" onclick="delProFile(${pf.id})">删除</button>
                                                        </div>
                                                        <div id="proFileDiv${pf.id}"
                                                                <c:if test="${vs.count % 4 != 0}">style="float: left"</c:if>>
                                                            <img name="proFileImage"
                                                                 src="${pageContext.request.contextPath}/images${pf.image}"
                                                                 width="200px" height="200px"></div>
                                                    </c:forEach>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div></div>
                                    <div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>一级类目</label>
                                                <select class="form-control" id="category" name="category">
                                                    <option value="-1" selected="sellected">请选择</option>
                                                    <c:forEach items="${categories}" var="c">
                                                        <option value="${c.id}"
                                                                <c:if test="${c.id == myCategory.id}">selected='selected'</c:if>>${c.cname}</option>
                                                    </c:forEach>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label>二级类目</label>
                                                <select class="form-control" id="categorysecond" name="csid">

                                                    <option value="-1" selected="sellected">请选择</option>
                                                </select>

                                            </div>
                                        </div>
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>链接地址</label> <input type="text" name="proHref"
                                                                           id="proHref" class="form-control"
                                                                           placeholder="产品链接:www.baidu.com"
                                                                           value="${product.proHref}">
                                            </div>
                                            <div class="form-group">
                                                <label>标题</label> <input type="text" name="proName"
                                                                         id="proName" class="form-control"
                                                                         placeholder="产品名称" value="${product.proName}"
                                                                         required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>简介</label>
                                                <textarea required rows="15" name="proInfo" id="proInfo"
                                                          class="form-control"
                                                          placeholder="产品简介....">${product.proInfo}</textarea>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="submit" id="ssb"
                                            class="btn btn-info btn-fill pull-right">修改
                                    </button>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <%@include file="include/footer.jsp" %>
    </div>
</div>


</body>


</html>
